<!---->
<template>
  <div  class="add-block">
    <p class="role-title">设置角色</p>
    <p class="role-bottom">所属用户组的角色：</p>
    <el-select v-model="roleData" multiple class="role-hint" size="large">
      <el-option
        v-for="item in roleList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <div style="height:100px"></div>
    <p class="role-bottom">注：用户默认属于“全部用户”角色</p>
    <div class="role-foot">
      <el-button size="small" type="primary">确定</el-button>
    </div>
  </div>
</template>


<script>
import { toRefs, reactive, onMounted } from 'vue';
export default {
  setup() {
    const state = reactive({
      roleList: [
        {
          value: '全部用户',
          label: '全部用户',
        },
        {
          value: '总经理',
          label: '总经理',
        },
        {
          value: '副总经理',
          label: '副总经理',
        },
        {
          value: '财务总监',
          label: '财务总监',
        },
        {
          value: '部门经理',
          label: '部门经理',
        },
      ],
      roleData: ['全部用户'],
    });
    // 页面加载时
    onMounted(() => {
    });
    return {
      ...toRefs(state),
    };
  },
  methods: {
      
  },
};
</script>


<style lang='scss' scoped>
@import './config.scss';
</style>